<template>
    <div class="crm-project-container">
        <el-dialog title="项目详情" v-model="isShowDialog" width="95%" :close-on-click-modal="false" :style="{ minHeight: '500px' }">
            <el-tabs v-model="activeName" class="project-detail">
                <el-tab-pane label="项目详情" name="project">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="合同名称">{{ project?.contract?.contractName }}</el-descriptions-item>
                        <el-descriptions-item label="合同编号">{{ project?.contract?.contractCode }}</el-descriptions-item>
                        <el-descriptions-item label="客户名称">{{ project.customerName }}</el-descriptions-item>
                        <el-descriptions-item label="合同金额">{{ project?.contract?.contractAmount }}元</el-descriptions-item>

                        <el-descriptions-item label="项目名称">{{ project.projectName }}</el-descriptions-item>
                        <el-descriptions-item label="开始时间">{{ project.projectStartTime }}</el-descriptions-item>
                        <el-descriptions-item label="结束时间">{{ project.projectEndTime }}</el-descriptions-item>
                        <el-descriptions-item label="完成时间">{{ project.finishTime }}</el-descriptions-item>

                        <el-descriptions-item label="项目状态">{{ projectStatusText(project.projectStatus) }}</el-descriptions-item>
                        <el-descriptions-item label="负责人" :span="3">
                            <el-tag type="primary" class="mr10" v-for="owner in project.owners">{{ owner.memberName }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="项目成员" :span="4">
                            <el-tag type="primary" class="mr10" v-for="member in project.members">{{ member.memberName }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="项目内容" :span="4">{{ project.projectText }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="mt15" :column="4" border>
                        <el-descriptions-item label="创建者">{{ project.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ project.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ project.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ project.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="所属用户">{{ project.userName }}</el-descriptions-item>
                        <el-descriptions-item label="所属部门">{{ project.deptName }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ project.remark }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="mt15" :column="4" border v-if="project.attachments && project.attachments.length > 0">
                        <el-descriptions-item label="项目文件">
                            <el-link class="mr10" type="primary" v-for="item in project.attachments" :key="item" :inline="true" :href="getStorageAccessTokenUrl(item.url)" target="_blank" :underline="false" :download="item.name">{{ item.name }}</el-link>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-carousel class="mt15" height="800px" :autoplay="false" v-if="project.canpreviews && project.canpreviews.length > 0">
                        <el-carousel-item v-for="item in project.canpreviews" :key="item">
                            <center>
                                <template v-if="item.url.toLowerCase().endsWith('.pdf')">
                                    <iframe :src="getStorageAccessTokenUrl(item.url)" width="100%" height="800px" frameborder="0"></iframe>
                                </template>
                                <!-- .jpg,.png,.svg,.webp,.gif -->
                                <template v-else>
                                    <el-image style="max-width: auto; height: 800px;" :src="getStorageAccessTokenUrl(item.url)" fit="contain" />
                                </template>
                            </center>
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
                <el-tab-pane label="项目过程" name="projectProcess">
                    <ProjectProcess :project="project"></ProjectProcess>
                </el-tab-pane>
                <el-tab-pane label="企业详情" name="enterprise">
                    <el-descriptions :column="4" border v-if="enterprise">
                        <el-descriptions-item label="企业名称">{{ enterprise.enterpriseName }}</el-descriptions-item>
                        <el-descriptions-item label="统一社会信用代码">{{ enterprise.creditCode }}</el-descriptions-item>
                        <el-descriptions-item label="法定代表人">{{ enterprise.legalName }}</el-descriptions-item>
                        <el-descriptions-item label="手机号码">{{ enterprise.mobile }}</el-descriptions-item>
                        <el-descriptions-item label="电话号码">{{ enterprise.telephone }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱号码">{{ enterprise.email }}</el-descriptions-item>
                        <el-descriptions-item label="网址" :span="2">{{ enterprise.website }}</el-descriptions-item>
                        <el-descriptions-item label="详细地址" :span="3">{{ enterprise.address }}</el-descriptions-item>
                        <el-descriptions-item label="员工人数">{{ enterprise.employeeCount }}</el-descriptions-item>
                        <el-descriptions-item label="注册资本">{{ enterprise.registeredCapital }}万元</el-descriptions-item>
                        <el-descriptions-item label="成立日期">{{ enterprise.enterpriseDate }}</el-descriptions-item>
                        <el-descriptions-item label="国标行业">{{ enterprise.industry }}</el-descriptions-item>
                        <el-descriptions-item label="企业规模">{{ getDictionaryText('crm_enterprise_scale', enterprise.enterpriseScale) }}</el-descriptions-item>
                        <el-descriptions-item label="创建者">{{ enterprise.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ enterprise.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ enterprise.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ enterprise.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="企业简介" :span="4">{{ enterprise.description }}</el-descriptions-item>
                        <el-descriptions-item label="备注" :span="4">{{ enterprise.remark }}</el-descriptions-item>
                    </el-descriptions>
                    <p v-if="!enterprise">暂无关联企业信息</p>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { Session } from '/@/utils/storage';
import ProjectProcess from '/@/views/crm/project/process/index.vue';
import { getCrmProject } from '/@/api/crm/project/index';
import { getDictionaryByLabel } from '/@/api/system/dictionary/index';
export default {
    name: 'crm/project/info',
    components: { ProjectProcess },
    setup(props, context) {
        const state = reactive({
            isShowDialog: false,
            activeName: 'project',
            project: {
                attachments: [],
                canpreviews: [],
            },
            enterprise: {},
            dictionary: new Map(),
        });

        const getDictionaryText = (dictLabel: String, dictValue: String) => {
            const dictionarys = state.dictionary.get(dictLabel) || [];
            return dictionarys.find(item => item.dictValue == dictValue)?.dictName;
        };

        const projectStatusText = (status: String) => {
            const statusMap = {
                '0': '未开始',
                '1': '进行中',
                '2': '已完成',
                '3': '已暂停',
                '4': '已终止',
            };
            return statusMap[status] || '未知';
        };

        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
            if(row){
                getCrmProject({id: row.id}).then((res) => {
                    if(res.code == 0){
                        state.project = Object.assign({}, res.data);
                        state.enterprise = state.project?.enterprise;
                        state.project.owners = res.data?.projectMembers?.filter(item => item.memberRole == 'ADMIN');
                        state.project.members = res.data?.projectMembers?.filter(item => item.memberRole == 'MEMBER');
                        if(state.project.attachments && state.project.attachments.length > 0){
                            state.project.canpreviews = state.project.attachments.filter(a => !a.url.toLowerCase().endsWith('.zip') && !a.url.toLowerCase().endsWith('.rar'));
                        }
                    }
                });
            }
            getDictionaryByLabel({ dictLabel: 'crm_enterprise_scale' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_enterprise_scale', res.data);
                }
            });
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
            state.project = {
                attachments: [],
                canpreviews: [],
            };
            state.enterprise = {};
            state.dictionary = new Map();
        };

        const getStorageAccessTokenUrl = (url) => {
			return url + '?accessToken=' + Session.get('token');
		}

        return {
            openDialog,
            closeDialog,
            projectStatusText,
            getDictionaryText,
            getStorageAccessTokenUrl,
            ...toRefs(state),
        };
    },
};
</script>
<style scoped lang="scss">
.crm-project-container {
    :deep .el-descriptions .is-bordered-label {
        width: 100px !important; /* 固定宽度为 100px */
    }
}
</style>